import Button from "@/components/Button";
import Title from "@/components/Title";

const datas = [
    {
        title: "智能内容工厂",
        desc: "AI全驱动  |  自动化生产  |  效能倍增",
        details: [
            {
                title: "成本效益革新",
                desc: "AI大模型赋能，单人操作实现全链路自动化，颠覆传统多人团队模式，极大降低人力成本",
            },
            {
                title: "效能飞跃引擎",
                desc: "智能混剪+精剪双引擎驱动，1小时内生成200+视频，单账号单月视频量一小时完成，生产效能跃升新高度",
            },
            {
                title: "内容精粹锻造",
                desc: "AI算法深度融入内容生产，逻辑拆分、智能组合、精准删减，避免常见错误，优先推荐高过审率视频，确保内容品质抗打",
            },
            {
                title: "风险智控屏障",
                desc: "AI技术精准对接各平台算法机制，智能规避内容风险点，降低风险内容出现几率，保障内容安全合规",
            },
        ],
    },
    {
        title: "智能互动先锋",
        desc: "AI+大数据  |  实时响应  |  粘性升级",
        details: [
            {
                title: "实时互动引擎",
                desc: "融合AI大模型与大数据分析，打造商业级智能员工系统，实现对粉丝互动的即时响应，高效促进粉丝向客户的身份转化",
            },
            {
                title: "用户触达导航",
                desc: "数字员工全面介入账号运营，通过智能分析内容互动（评论、点赞、分享），迅速识别并主动接触高潜力用户，实现全天候多场景用户引流",
            },
            {
                title: "全天候服务枢纽",
                desc: "7*24小时不间断运行，根据用户行为动态提供个性化服务，增强用户粘性，有效降低获客成本",
            },
            {
                title: "人工智能营销模型",
                desc: "基于工作模型自动化处理常见问题，利用互动数据智能优化营销策略，建立智能成交模型，显著提升转化率",
            },
        ],
    },
    {
        title: "智能账号矩阵",
        desc: "一键多平台  |  矩阵式管理  |  风险管控",
        details: [
            {
                title: "一键全网内容同步",
                desc: "突破多平台多账号的发布限制，实现内容的极速分配与跨平台一键式发布，确保信息的即时同步和广泛覆盖",
            },
            {
                title: "数字化管理跃升",
                desc: "借助数字员工的流程化、标签化、锚点化管理，将单人管理账号数量提升至500+，极大提升管理效率和操作便捷性",
            },
            {
                title: "账号智能风险预警",
                desc: "数字员工全天候监控账号状态，对敏感和违规操作进行实时预警，确保运营过程中潜在风险的及时识别和处理",
            },
            {
                title: "智能数据整合中心",
                desc: "集中收集、合并、分析全账号数据，利用先进的数据模型优化运营策略，为决策提供精准的数据支持",
            },
        ],
    },
    {
        title: "智能变现引擎",
        desc: "CLI技术  |  商品链接  |  极速转化",
        details: [
            {
                title: "商业链接智能部署",
                desc: "采用Content-Link Integration (CLI)技术，实现视频内容与商品链接的批量绑定，一键发布，加速商品转化流程，提升销售效率",
            },
            {
                title: "SCRM私域驱动",
                desc: "自研SCRM系统为商家提供全链路私域管理解决方案，覆盖引流、留存、裂变、转化全运营周期，全面提升管理效率和用户转化率",
            },
            {
                title: "用户洞察引擎",
                desc: "结合SCRM系统和数字员工技术，深入挖掘用户行为数据，构建精细化用户画像，实现高度个性化的精准营销",
            },
            {
                title: "达人资源整合",
                desc: "自建覆盖全行业的达人资源库，实现精准分类和高效匹配，促进商家与达人的有效互动，加速商业变现",
            },
        ],
    },
];

const bgs = [
    "bg-[url('/huoketong/bg-1.png')] group-hover:bg-[url('/huoketong/bg-1.png')] laptop:bg-none",
    "bg-[url('/huoketong/bg-2.png')] group-hover:bg-[url('/huoketong/bg-2.png')] laptop:bg-none",
    "bg-[url('/huoketong/bg-3.png')] group-hover:bg-[url('/huoketong/bg-3.png')] laptop:bg-none",
    "bg-[url('/huoketong/bg-4.png')] group-hover:bg-[url('/huoketong/bg-4.png')] laptop:bg-none",
];

const Huoketong = () => {
    return (
        <div className="max-w-7xl overflow-auto m-auto mb-6 laptop:mb-24 flex flex-col items-center">
            <Title desc="智能营销革命，效率翻倍新纪元">
                获客通——掌握未来营销，引领AI驱动的商业增长
            </Title>
            <ul className="w-full flex flex-col mb-6 laptop:flex-row items-center justify-between px-0 laptop:px-6 laptop:gap-4 desktop:gap-6">
                {datas.map((data, index) => (
                    <li
                        key={index}
                        className="group w-full laptop:w-auto relative laptop:hover:w-80 desktop:hover:w-96 laptop:hover:grow-0 laptop:h-[30rem] shrink-0 grow"
                    >
                        <div className="laptop:absolute laptop:w-full laptop:group-hover:-top-24 laptop:py-10 laptop:px-4 laptop:rounded-lg overflow-hidden laptop:group-hover:px-0 laptop:group-hover:py-0 bg-white laptop:border-white laptop:drop-shadow-[0_0_20px_#E5F0F8]">
                            <div
                                className={`flex flex-col items-center ${bgs[index]} bg-cover bg-center py-7 gap-3 laptop:py-7 laptop:group-hover:px-9 laptop:group-hover:gap-3 laptop:group-hover:items-start laptop:gap-0`}
                            >
                                <h2 className="text-lg laptop:text-lg desktop:text-xl laptop:group-hover:text-lg font-semibold text-font-blue-300">
                                    {data.title}
                                </h2>
                                <img
                                    className="hidden laptop:block laptop:group-hover:hidden w-56 laptop:w-68 desktop:w-72 mt-[1.9rem] mb-[2.3rem]"
                                    src={`/huoketong/icon-${index + 1}.png`}
                                    alt={data.title}
                                />
                                <p className="text-font-blue-200 text-base laptop:text-xs desktop:text-sm">
                                    {data.desc}
                                </p>
                            </div>
                            <ul className="flex flex-col laptop:hidden laptop:group-hover:flex px-9 gap-6 py-7">
                                {data.details.map((detail, cindex) => (
                                    <li
                                        key={cindex}
                                        className="flex gap-3 items-start"
                                    >
                                        <img
                                            src={`/huoketong/icon-${
                                                index + 1
                                            }-${cindex + 1}.svg`}
                                            alt={detail.title}
                                        />
                                        <div className="flex flex-col gap-2">
                                            <h3 className="text-base">
                                                {detail.title}
                                            </h3>
                                            <p className="text-gray-400 text-xs leading-5">
                                                {detail.desc}
                                            </p>
                                        </div>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </li>
                ))}
            </ul>
            <Button>预约演示</Button>
        </div>
    );
};

export default Huoketong;
